// left menu
.menu {
  width: 100%;
  height: 100%;
  font-size: 14px;
  @include breakpoint(md) {
    position: static;
    summary {
      display: none;
    }
  }
  .menu-item {
    @extend .icon-middle-wrap;
    display: flex;
    color: $text-main;
    text-decoration: none;
    margin-bottom: 10px;
    &.last {
      margin-bottom: 30px;
    }
    i.fas {
      color: #979797;
      margin-right: 8px;
      transform: scale(1.2);
    }
    &.selected {
      color: $primary;
      i.fas {
        color: inherit;
      }
    }
    &.menu-sub-item {
      position: relative;
      color: $text-gray-light;
      .fa-arrow {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-100%, -50%);
        opacity: 0;
      }
      &.selected {
        color: $primary;
        .fa-arrow {
          opacity: 1;
        }
      }
    }
    &.depth-1 {
      margin-left: 1.6em;
    }
  }
  .menu-sub-item.menu-arrow {
    position: relative;
  }

  a.menu-item {
    &:hover {
      color: $primary;
      .fas {
        color: inherit;
      }
    }
  }
}

@media (max-width: 768px) {
  .menu {
    position: fixed;
    z-index: 99;
    top: 51px;
    left: 0;
    padding: 0 15px;
    height: 0;
    box-sizing: border-box;
    transition: all .3s ease;
    background: #fff;
    overflow-y: revert !important;
    &[open] {
      padding: 20px 15px;
      height: calc(100vh - 50px);
    }
    summary {
      position: fixed;
      top: 0;
      left: 0;
      background: #fff;
      padding: 17px 30px 17px 15px;
      display: block;
      line-height: 100%;;
      &:active {
        background: #f0f0f0;
      }
    }
  }
}